<template>
  <div id="app">
    <div class="col-8 offset-2">
      <table class="table caption-top  table-striped">
      <caption>
        <h1>学生管理系统</h1>
        <el-button type="primary" @click="getStudents">获取学生信息</el-button>

        <el-button type="warning" @click="dialogVisible = true">添加学生信息</el-button>
        <el-button type="primary" @click="dialogVisiblelogin = true">登 陆</el-button>
        <el-button type="warning" @click="dialogVisibleregister = true">注 册</el-button>

        <!--添加学生信息-->
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div>添加学生信息</div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStudent">添 加</el-button>
          </span>
          <div>
            <span>学号</span><input v-model="newStudent.number"/>
          </div>
          <div>
            <span>姓名</span><input v-model="newStudent.name"/>
          </div>
          <div>
            <span>年龄</span><input v-model.number="newStudent.age"/>
          </div>
          <div>
            <span>语文</span><input v-model.number="newStudent.chinese"/>
          </div>
          <div>
            <span>数学</span><input v-model.number="newStudent.math"/>
          </div>
          <div>
            <span>英语</span><input v-model.number="newStudent.english"/>
          </div>
        </el-dialog>

        <!-- 登陆 -->
        <el-dialog
          title="登陆"
          :visible.sync="dialogVisiblelogin"
          width="30%"
          :before-close="handleClose">
          <span>用户名</span>
          <input type="text" v-model="user_for_login.username">
          <br>
          <span>密码</span>
          <input type="password" v-model="user_for_login.password">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisiblelogin = false">取 消</el-button>
            <el-button type="primary" @click="login">登 陆</el-button>
          </span>
        </el-dialog>

        <!-- 注册 -->
        <el-dialog
          title="注册"
          :visible.sync="dialogVisibleregister"
          width="30%"
          :before-close="handleClose">
          <span>你的名字</span>
          <input type="text" v-model="user_for_register.username">
          <br>
          <span>输入密码</span>
          <input type="password" v-model="user_for_register.password">
          <br>
          <span>确认密码</span>
          <input type="password" v-model="user_for_register.confirmPassword">

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleregister = false">取 消</el-button>
            <el-button type="primary" @click="register">注 册</el-button>
          </span>
        </el-dialog>

      </caption>
      <thead>
        <tr>
          <th scope="col">学号</th>
          <th scope="col">姓名</th>
          <th scope="col">年龄</th>
          <th scope="col">语文</th>
          <th scope="col">数学</th>
          <th scope="col">英语</th>
          <!-- <th></th> -->
        </tr>
      </thead>
      <tbody>
        <Student v-for="stu in student_for_page" :key="stu.id" :student="stu"></Student>
      </tbody>
    </table>
    <div class="text-center">
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left" @click="last_page">上一页</el-button>
        <el-button type="primary" @click="next_page">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
  </div>  
    </div>    
  </div>
</template>


<script>

import axios from 'axios'
import Student from './components/Student.vue'
export default {
  name: 'App',
  components: {
    Student
  },

  data(){
    return{
      user_for_login:{
        username:"",
        password:"",
      },
      user_for_register:{
        username:"",
        password:"",
        confirmPassword:"",
      },
      page:1,
      list:[],
      dialogVisible: false,
      dialogVisiblelogin: false,
      dialogVisibleregister: false,
      newStudent:{
        number:"",
        name:"",
        age:"",
        chinese:"",
        math:"",
        english:"",
      }
    }
  },
  methods:{
    //查询
    getStudents(){
      if(sessionStorage.getItem("isLogined")=="true"){
        axios({
        url: "http://43.140.196.117:8088/list",
        method: 'GET',
        }).then(res=>{
          console.log(res.data);
          this.list=res.data;
        })
      }else{
        this.$alert("请先登陆")
      }
    },

    //关闭弹窗
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },


    //添加
    addStudent(){
      axios({
            url: "http://43.140.196.117:8088/add",
            method: "POST",
            data:this.newStudent
      })
      this.dialogVisible = false
    },


    // 分页：上一页
    last_page(){
      this.page-=1;
    },


    // 分页：下一页
    next_page(){
      this.page+=1;
    },


    //登陆
    login(){
      axios({
        url: "http://43.140.196.117:8088/login",
        data: this.user_for_login,
        method: "POST"
      }).then(res=>{
        console.log(res.data);
        if(res.data=="1"){
          sessionStorage.setItem("isLogined","true");
        }else{
          this.$alert("用户名或密码错误");
        }
      })
      this.dialogVisiblelogin = false
    },


    // 注册
    register(){
      axios({
        url:"http://43.140.196.117:8088/register",
        method:"POST",
        data:this.user_for_register
      })
      this.dialogVisibleregister = false;
      this.$alert("注册成功");
      
    }
  },
  computed: {
    student_for_page(){
      return this.list.slice(this.page*10-10,this.page*10);
    }
  }
}
</script> 

<style>

</style>
